class PixelCharacterGenerator {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.pixelSize = 4;
        this.palette = {
            primary: '#7C3AED',
            secondary: '#4F46E5'
        };
        this.currentTemplate = 'warrior';
        this.currentAnimation = 'idle';
        this.frameCount = 0;
        this.isAnimating = false;
    }

    // 初始化角色生成器
    init() {
        this.setupEventListeners();
        this.generateCharacter();
    }

    // 设置事件监听
    setupEventListeners() {
        // 模板选择
        document.getElementById('templateSelect').addEventListener('change', (e) => {
            this.currentTemplate = e.target.value;
            this.generateCharacter();
        });

        // 像素大小调整
        document.getElementById('pixelSize').addEventListener('input', (e) => {
            this.pixelSize = parseInt(e.target.value);
            this.generateCharacter();
        });

        // 颜色调整
        document.getElementById('primaryColor').addEventListener('input', (e) => {
            this.palette.primary = e.target.value;
            this.generateCharacter();
        });

        document.getElementById('secondaryColor').addEventListener('input', (e) => {
            this.palette.secondary = e.target.value;
            this.generateCharacter();
        });

        // 动画控制
        document.querySelectorAll('input[name="animation"]').forEach(radio => {
            radio.addEventListener('change', (e) => {
                this.currentAnimation = e.target.id;
                this.startAnimation();
            });
        });

        // 下载按钮
        document.getElementById('downloadBtn').addEventListener('click', () => {
            this.downloadCharacter();
        });

        document.getElementById('downloadSpriteSheet').addEventListener('click', () => {
            this.downloadSpriteSheet();
        });
    }

    // 生成角色
    generateCharacter() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        
        // 根据模板生成基础形状
        switch(this.currentTemplate) {
            case 'warrior':
                this.generateWarrior();
                break;
            case 'mage':
                this.generateMage();
                break;
            case 'archer':
                this.generateArcher();
                break;
            case 'monster':
                this.generateMonster();
                break;
        }
    }

    // 生成战士模板
    generateWarrior() {
        // 示例：绘制简单的战士形象
        this.ctx.fillStyle = this.palette.primary;
        
        // 头部
        this.drawPixel(12, 4, 8, 8);
        
        // 身体
        this.drawPixel(13, 12, 6, 12);
        
        // 武器
        this.ctx.fillStyle = this.palette.secondary;
        this.drawPixel(20, 12, 4, 16);
    }

    // 绘制像素
    drawPixel(x, y, width, height) {
        this.ctx.fillRect(
            x * this.pixelSize,
            y * this.pixelSize,
            width * this.pixelSize,
            height * this.pixelSize
        );
    }

    // 开始动画
    startAnimation() {
        if (this.isAnimating) return;
        this.isAnimating = true;
        this.animate();
    }

    // 动画循环
    animate() {
        if (!this.isAnimating) return;
        
        this.frameCount++;
        this.generateCharacter();
        
        // 添加简单的动画效果
        if (this.currentAnimation === 'walk') {
            // 实现行走动画
        } else if (this.currentAnimation === 'attack') {
            // 实现攻击动画
        }
        
        requestAnimationFrame(() => this.animate());
    }

    // 下载角色图片
    downloadCharacter() {
        const link = document.createElement('a');
        link.download = `pixel-character-${this.currentTemplate}.png`;
        link.href = this.canvas.toDataURL();
        link.click();
    }

    // 下载动画表
    downloadSpriteSheet() {
        // 创建包含多个动画帧的精灵表
        const spriteSheet = document.createElement('canvas');
        spriteSheet.width = this.canvas.width * 4;
        spriteSheet.height = this.canvas.height;
        const ctx = spriteSheet.getContext('2d');

        // 绘制不同动画帧
        for (let i = 0; i < 4; i++) {
            this.frameCount = i;
            this.generateCharacter();
            ctx.drawImage(this.canvas, i * this.canvas.width, 0);
        }

        // 下载精灵表
        const link = document.createElement('a');
        link.download = `pixel-character-${this.currentTemplate}-spritesheet.png`;
        link.href = spriteSheet.toDataURL();
        link.click();
    }
}

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('characterPreview');
    const generator = new PixelCharacterGenerator(canvas);
    generator.init();
}); 